<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">
					<view class="flex-center">
						<view v-for="(item, index) in tabs" :key="index"
							:class="['tab-item u-f-44 u-lh-60', index > 0 ? 'u-m-l-54' : '']" @click="tabIndex = index">
							<view :class="[tabIndex === index ? 'font-medio' : 'color-grew']">
								{{ lang_common[item.key] }}</view>
							<view v-if="tabIndex === index" class="tab-item-line"></view>
						</view>
					</view>
				</view>
				<view></view>
			</view>
			<!-- 分割线 -->
			<u-gap height="1" bgColor="rgba(0, 0, 0, 0.07)"></u-gap>
		</view>

		<!-- 列表 -->
		<swiper style="height: calc(100vh - 100rpx - var(--status-bar-height));" :current="tabIndex"
			@change="tabIndex = $event.detail.current">
			<swiper-item v-for="(item, index) in tabs" :key="index">
				<note-list ref="mescrollItem" :i="index" :index="tabIndex" :merchant-id="merchantId"></note-list>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import NoteList from './components/note-list.vue'

	export default {
		components: { NoteList },
		data() {
			// 初始化顶部导航栏
			let tabs = ['follow', 'discover'].map((item, index) => {
				let result = {
					key: item,
					value: index
				}
				return result
			})

			return {
				tabs,
				tabIndex: 0,
				
				merchantId: '',
				timer: null
			}
		},
		// onShow() {
		// 	clearTimeout(this.timer)
		// 	this.tiemr = setTimeout(() => {
		// 		uni.$emit('update-note-page')
		// 	}, 300)
		// },
		onLoad({ merchantId, type }) {
			if (merchantId) {
				this.merchantId = merchantId
			}
			if (type) {
				this.tabIndex = this.tabs.findIndex(item => item.key === type)
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.tab-item {
		position: relative;
		top: 0;
		left: 0;

		&-line {
			position: absolute;
			bottom: -10rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 42rpx;
			height: 7rpx;
			background: linear-gradient(to right, #F94404 0%, #FD164F 100%);
			box-sizing: 0 4rpx 8rpx 0 #FD164F;
			border-radius: 22rpx;
		}
	}
</style>
